<?php include './application/views/common/zhs_header.php';?>
<?php include './application/views/common/zhs_usercenter_acnt.php';?>
<div class="inv_box w">
<?php include './application/views/common/zhs_usercenter_left.php';?>
 
  <div class="membd_right">
    <div class="memshcont_ul" style="margin-top:0;">

        <h3 class="membdrg_tit">推广提成汇总</h3>
	
    <div class="xq_body pt">
      <table class="membd_tab">
      <?php if($user_details != '1'){?>
      &nbsp;&nbsp;&nbsp;&nbsp;<a href="/user/invite_layer.html?typer=exel">导出数据</a>
      <thead>
      <tr bgcolor="#F3F3F3" height="40px">
		<td align="center"><strong>推荐等级</strong></td>
		<td align="center"><strong>推荐用户数</strong></td>
		<td align="center"><strong>历史投资额</strong></td>
		<td align="center"><strong>历史提成额</strong></td>
		<td align="center"><strong>上月投资额</strong></td>
		<td align="center"><strong>上月提成额</strong></td>
		<td align="center"><strong>本月投资额</strong></td>
		<td align="center"><strong>本月提成额</strong></td>
	  </tr>
      </thead>
      <script type="text/javascript">
        var arry = new Array(12);
        var arrt = new Array(12);
       </script>
      <tbody>
        <?php $i=1; foreach($invi_user as $val){?>
        <script type="text/javascript">
        arry[<?php echo $i;?>] = [<?php echo $val['month1_money'].','.$val['month2_money'].','.$val['month3_money'].','.$val['month4_money'].','.$val['month5_money'].','.$val['month6_money'].','.$val['month7_money'].','.$val['month8_money'].','.$val['month9_money'].','.$val['month10_money'].','.$val['month11_money'].','.$val['month12_money'];?>];
        arrt[<?php echo $i;?>] = [<?php  echo $val['month1_users'].','.$val['month2_users'].','.$val['month3_users'].','.$val['month4_users'].','.$val['month5_users'].','.$val['month6_users'].','.$val['month7_users'].','.$val['month8_users'].','.$val['month9_users'].','.$val['month10_users'].','.$val['month11_users'].','.$val['month12_users'];?>];
        </script>
	  <tr height="35px">
		<td align="center"><?php echo "第".$i."级";?></td>
		<td align="center"> <a href="/user/invite_layer/<?php echo $val["layer_id"];?>.html" ><?php echo $val['count_userid'];?></a> </td>
		<td align="center"><?php echo $val['money'];?></td>
		<td align="center"><?php echo $val['money_ti'];?></td>
		<td align="center"><?php echo $val['last_money'];?></td>
		<td align="center"><?php echo $val['last_money_ti'];?></td>
		<td align="center"><?php echo $val['now_money'];?></td>
		<td align="center"><?php echo $val['now_money_ti'];?></td>
	  </tr>
	  
	  <?php $i++; }?>
      </tbody>
     
      <?php } else {?>
      &nbsp;&nbsp;&nbsp;&nbsp;<a href="/user/invite_layer/<?php echo $layer_id;?>.html?typer=exel">导出数据</a>
      <thead>
      <tr bgcolor="#F3F3F3" height="40px">
		<td align="center"><strong>推荐人号</strong></td>
		<td align="center"><strong>用户</strong></td>
		<td align="center"><strong>注册时间</strong></td>
		<td align="center"><strong>历史投资额</strong></td>
		<td align="center"><strong>历史提成额</strong></td>
		<td align="center"><strong>上月投资额</strong></td>
		<td align="center"><strong>上月提成额</strong></td>
		<td align="center"><strong>本月投资额</strong></td>
		<td align="center"><strong>本月提成额</strong></td>
	  </tr>
      </thead>
      <tbody>
        <?php $i=1; foreach($invi_user as $val){
        	if(!$val['money']) $val['money']=0;
	        if(!$val['last_money']) $val['last_money']=0;
	        if(!$val['now_money']) $val['now_money']=0;
        ?>
	  <tr height="35px">
		<td align="center"><?php echo $val['inv_userid'];?> </td>
		<td align="center"><?php echo strdisplay_start($val['username'], 2);?> </td>
		<td align="center"><?php echo $val['add_time'];?></td>
		<td align="center"><?php echo $val['money'];?></td>
		<td align="center"><?php echo $val['money']*$dou;?></td>
		<td align="center"><?php echo $val['last_money'];?></td>
		<td align="center"><?php echo $val['last_money']*$dou;?></td>
		<td align="center"><?php echo $val['now_money'];?></td>
		<td align="center"><?php echo $val['now_money']*$dou;?></td>
		
	  </tr>
	  
      <?php } }?>
    </table>
    </div>
<?php if($user_details != '1'){?>
     <!--统计图 开始--> 
     <br><br>
  	<div id="consuming_time"></div> 
	<div id="TwentyFourHourChart"> </div> 
 <!--统计图 结束-->
<?php } else {?>
<div class="invbd_page"><td colspan="4" class="page" style="text-align: center;"><?php echo $this->pagination->create_links();?></td></div>
<?php }?>           
            
    </div>	
 	
  </div>
  
  <style type="text/css"> 
/*样式*/ 
#consuming_time{ font-size:12px; border:solid 1px #ccc; background-color:#f2f6fb; margin:10px 20px; height:40px; line-height:20px; padding:5px 10px; width:260px; } 
#TwentyFourHourChart{ width:700px; height:340px; border:solid 1px #B3B3DC; position:relative; top:10px; left:20px; } 
</style> 
             
<script type="text/javascript">

window.onload = function() {
    var _time = "统计年份：<select name='nianfen' > <option value='2015'>2015</option></select>";
    _time += "&nbsp;&nbsp;&nbsp;&nbsp;推荐等级：<select name='dengji' id='dengji' onchange='ters()'><?php for($j=1;$j<$i;$j++){ echo "<option value='".$j."'>".$j."级</option>"; }?></select>";
    toDrawingChart(arry[1],arrt[1]);
    _time += "<br>提示：纵向数标代表以千元或者以个数为单位";
    document.getElementById("consuming_time").innerHTML = _time;
    //显示提示信息 
    toShowTipMessage();
};
function ters(){
	var item = $('#dengji').val();
	toDrawingChart(arry[item],arrt[item]);
	 //显示提示信息 
    toShowTipMessage();
}
/*Array 数组扩展*/
Array.prototype.max = function() {
    return Math.max.apply({},
    this);
};
Array.prototype.min = function() {
    return Math.min.apply({},
    this);
};
//绘制24小时分时段呼入图形报表的函数 
function toDrawingChart(
/*String*/
inCallsPerHour,
/*String*/
inCompletePerHour) {
	document.getElementById("TwentyFourHourChart").innerHTML = "";
    var ic = document.getElementById("TwentyFourHourChart"); //页面上唯一的一个div，作为图表的容器 
    if (inCallsPerHour != null) {
        var inCallMax = inCallsPerHour.max(); //从传入的数组中取得数组最大值，用到了一个自己写的array的扩展方法max() 
        var inCallMax1 = inCompletePerHour.max(); //从传入的数组中取得数组最大值，用到了一个自己写的array的扩展方法max() 
        if(inCallMax1 > inCallMax) inCallMax = inCallMax1;
        var topOffsetPercent = 280 / inCallMax; //计算以最大值为基准的每像素显示比例，百分比 
        for (var i = 1; i <= inCallsPerHour.length; i++) { //循环24小时数据 
            var sumrow = document.createElement("div"); //创建一个div元素sumrow 
            sumrow.id = "sumrow_" + i + "_" + inCallsPerHour[i-1]; //为刚刚创建的div元素sumrow添加id属性（这里把时间，呼入电话总量数据写入到id中，后面显示这些信息的时候有用） 
            sumrow.setAttribute("class", "incallchartsumrow"); //添加属性 
            //设置元素的left（每个div宽度为10px，那么第i个元素就应该是i*10，因为还有一列10像素的组装图，所以还要*2，加上距离左侧40px边距 + 每2个柱状图为一组之间的间隔空隙6px，所以得出如下，） 
            sumrow.style.left = ((i-1) * 22) * 2 + ((i-1) * 6) + 40 + "px";
            //高度的计算，Math.round四舍五入取值，百分比的基数 乘以 当前时段的呼入数据，为统计图的高度 
            sumrow.style.height = Math.round(topOffsetPercent * inCallsPerHour[i-1]) + "px";
            sumrow.style.width = "15px"; //宽度10px像素 
            sumrow.style.position = "absolute"; //绝对定位 
            sumrow.style.overflow = "hidden"; //超出部分隐藏 
            sumrow.style.background = "none repeat scroll 0 0 #1280ef"; //背景颜色 
            sumrow.style.display = "block"; //块状显示 
            //距离容器上边框的距离，图表高度200 减去 当前这个柱状图图表高度 
            sumrow.style.top = 300 - Math.round(topOffsetPercent * inCallsPerHour[i-1]) + "px";
            ic.appendChild(sumrow); //将创建的sumcow元素添加到ic容器中去 
            var timerow = document.createElement("div");
            timerow.id = "timerow_" + i;
            timerow.setAttribute("class", "callnum");
            timerow.style.left = (22 * (i-1)) * 2 + ((i-1) * 6) + 40 + "px";
            timerow.style.width = "35px";
            timerow.style.position = "absolute";
            timerow.style.top = "305px";
            timerow.innerHTML = '<span style="font-size:12px; color:#666666;"> ' + i + '月</span>';
            ic.appendChild(timerow);
            var cptrow = document.createElement("div");
            cptrow.id = "cptrow_" + i + "_" + inCompletePerHour[i-1];
            cptrow.setAttribute("class", "incallchartsumrow");
            cptrow.style.width = "15px";
            cptrow.style.height = Math.round(topOffsetPercent * inCompletePerHour[i-1]) + "px";
            cptrow.style.position = "absolute";
            cptrow.style.background = "none repeat scroll 0 0 #92be0f";
            cptrow.style.left = ((i-1) * 22) * 2 + 10 + ((i-1) * 6) + 45 + "px";
            cptrow.style.display = "block";
            cptrow.style.top = 300 - Math.round(topOffsetPercent * inCompletePerHour[i-1]) + "px";
            ic.appendChild(cptrow);
        }
        //绘制标尺线 
        for (var i = 0; i < 5; i++) {
            var tity = document.createElement("div");
            tity.setAttribute("class", "tity");
            tity.style.width = "40px";
            tity.style.position = "absolute";
            tity.style.top = (56 * i) + (20 - 12) + "px";
            tity.style.left = "15px";
            var ter = Math.round(inCallMax - (inCallMax / 5) * i);
            tity.innerHTML = '<span style="font-size:12px; color:#666666;"> ' +ter+ '</span>';
            ic.appendChild(tity);
            var liney = document.createElement("div");
            liney.setAttribute("style", "width:620px; left:40px; border-top:1px dotted #B9B9B9; height:1px; line-height:1px; display:block; overflow:hidden; position:absolute; ");
            liney.style.top = (56 * i) + 20 + "px";
            ic.appendChild(liney);
        }
    } else {
        icArea.innerHTML = '<div style="color:#0066cc; font-size:12px; margin:20px 0 0 80px;">暂无统计数据</div>';
    }
}
//鼠标提示显示24小时实时>》呼入《<监控的详细数据 
function toShowTipMessage() {
    var nodes = document.getElementById("TwentyFourHourChart").getElementsByTagName("div");
    for (var i = 0; i < nodes.length; i++) {
        nodes[i].onmouseover = function() {
            var temp = this.id.split("_");
            var type = temp[0];
            var hour = temp[1];
            var times = temp[2];
            var tipMessage = "";
            var tip = document.createElement("div");
            tip.id = "TipMessage";
            tip.style.position = "absolute";
            tip.style.top = (parseInt(document.getElementById(this.id).style.top.replace("px", "")) - 20) + "px";
            tip.style.left = document.getElementById(this.id).style.left;
            if (type == "sumrow") {
                tipMessage = "本月投资额度：" + times+"千";
            } else if (type == "cptrow") {
                tipMessage = "本月新增用户：" + times+"个";
            }
            tip.innerHTML = '<span style="font-size:12px; display:block; height:20px; background-color:#ffffff; padding:0px 2px; line-height:20px;">' + tipMessage + '</span>';
            document.getElementById("TwentyFourHourChart").appendChild(tip);
        }
        nodes[i].onmouseout = function() {
            var tip = document.getElementById("TipMessage");
            document.getElementById("TwentyFourHourChart").removeChild(tip);
        }
    }
}
</script>
             
</div> 

<?php include './application/views/common/zhs_footer.php';?>

<?php include './application/views/common/zhs_right.php';?>
